<template>
	<div>
		<div id="app" class="wrapper wrapper-content">
			<div class="row">
				<div>
					<div class="panel panel-primary">
						<div class="panel-body" style="padding: 0px 120px; box-sizing: border-box;">
							<el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading"
								:disabled="formReadOnly">
								<div style="text-align:center">
									<h3 style="font-weight: bold;color: black;font-size:24px">出差申请单</h3>
								</div>
								<table
									style="margin:0 auto;width:80%;margin-top:20px;border-collapse: collapse;margin-bottom:20px">
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											基本信息
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请人</td>
										<td class="width-30">
											<el-form-item prop="applyuser.id">
												<user-select :limit='1' :value="inputForm.applyuser.id"
													@getValue='(value) => {inputForm.applyuser.id=value}' disabled>
												</user-select>
											</el-form-item>
										</td>
										<td class="width-15">所属公司</td>
										<td class="width-30">
											<el-form-item prop="company.id">
												<SelectTree ref="company" :props="{
                                                    value: 'id',             // ID字段名
                                                    label: 'name',         // 显示名称
                                                    children: 'children'    // 子级字段名
                                                  }" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.company.id" :clearable="true" :accordion="true"
													@getValue="(value) => {inputForm.company.id=value}" />
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请时间</td>
										<td class="width-30">
											<el-form-item prop="applytime">
												<el-date-picker v-model="inputForm.applytime" type="datetime"
													style="width: 100%;" disabled value-format="yyyy-MM-dd HH:mm:ss"
													:clearable="false" placeholder="请选择">
												</el-date-picker>
											</el-form-item>
										</td>
										<td class="width-15">所属部门</td>
										<td class="width-30">
											<el-form-item prop="depart.id">
												<SelectTree ref="depart" :props="{
                                                    value: 'id',             // ID字段名
                                                    label: 'name',         // 显示名称
                                                    children: 'children'    // 子级字段名
                                                  }" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.depart.id" :clearable="true" :accordion="true"
													@getValue="(value) => {inputForm.depart.id=value}" />
											</el-form-item>
										</td>
									</tr>
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/basic.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											出差信息
										</td>
									</tr>
									<tr>
										<td colspan="4"
											style="text-align: left;padding: 0px 24px;position: relative;font-size: 12px;">
											<el-form-item label="是否用车" prop="iscar"
												:rules="[{required: true, message:'是否用车不能为空', trigger:'blur'}]"
												label-width="80px">
												<el-select v-model="inputForm.iscar" placeholder="请选择" size="small">
													<el-option v-for="item in $dictUtils.getDictList('yes_no')"
														:key="item.value" :label="item.label" :value="item.value">
													</el-option>
												</el-select>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>开始日期</td>
										<td class="width-30">
											<el-form-item prop="startdate"
												:rules="[{required: true, message:'开始日期不能为空', trigger:'blur'}]">
												<el-date-picker v-model="inputForm.startdate" type="date"
													style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
													@change="travelHour" placeholder="请选择">
												</el-date-picker>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>结束日期</td>
										<td class="width-30">
											<el-form-item prop="enddate"
												:rules="[{required: true, message:'结束日期不能为空', trigger:'blur'}]">
												<el-date-picker v-model="inputForm.enddate" type="date"
													style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
													@change="travelHour" placeholder="请选择">
												</el-date-picker>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>开始时间</td>
										<td class="width-30">
											<el-form-item prop="starttime"
												:rules="[{required: true, message:'开始时间不能为空', trigger:'blur'}]">
												<el-time-picker v-model="inputForm.starttime" style="width: 100%;"
													value-format="HH:mm:ss" format="HH:mm:ss" @change="travelHour"
													placeholder="请选择">
												</el-time-picker>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>结束时间</td>
										<td class="width-30">
											<el-form-item prop="endtime"
												:rules="[{required: true, message:'结束时间不能为空', trigger:'blur'}]">
												<el-time-picker v-model="inputForm.endtime" style="width: 100%;"
													value-format="HH:mm:ss" format="HH:mm:ss" @change="travelHour"
													placeholder="请选择">
												</el-time-picker>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">时长(天)</td>
										<td class="width-30">
											<el-form-item prop="longtime">
												<el-input v-model="inputForm.longtime" readonly> </el-input>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>出差地</td>
										<td class="width-30">
											<el-form-item prop="place"
												:rules="[{required: true, message:'出差地不能为空', trigger:'blur'}]">
												<el-input v-model="inputForm.place"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHiddens errorMsg" v-if="inputForm.iscar==0&&inputForm.iscar!=''">
										<td class="width-15"><span style="color: red">*&nbsp;</span>车辆</td>
										<td class="width-30">
											<!-- @getValue='(value) => {inputForm.carinfo.id=value}' -->
											<el-form-item label="" prop="carinfo.id"
												:rules="[{required: true, message:'请填写车辆', trigger:'blur'}]">
												<GridSelects title="选择车辆" labelName='carno' labelValue='id'
													:value="inputForm.carinfo.id" :limit="1"
													@getValue='getValuaes(arguments)'
													:columns="[ { prop: 'carno', label: '车牌号' },{ prop: 'brand', label: '品牌' },{ prop: 'seatNumber', label: '载客人数' } ]"
													:searchs="[ { prop: 'carno', label: '车牌号' },{ prop: 'brand', label: '品牌' },{ prop: 'seatNumber', label: '载客人数' } ]"
													dataListUrl="/dlyrl/oa/carinfo/oaCarinfo/getCarList"
													entityBeanName="oaCarinfo"
													queryEntityUrl="/dlyrl/oa/carinfo/oaCarinfo/queryById">
												</GridSelects>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>司机</td>
										<td class="width-30">
											<el-form-item label="" prop="driver.id"
												:rules="[{required: true, message:'请填写司机', trigger:'blur'}]">
												<user-select :limit='1' :value="inputForm.driver.id"
													@getValue='(value) => {inputForm.driver.id=value}'></user-select>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden" v-if="inputForm.iscar==0&&inputForm.iscar!=''">
										<td class="width-15"><span style="color: red">*&nbsp;</span>开始里程(km)</td>
										<td class="width-30">
											<el-form-item label="" prop="beginMileage"
												:rules="[{required: true, message:'请填写开始里程', trigger:'blur'}]">
												<el-input v-model="inputForm.beginMileage" placeholder=""></el-input>
											</el-form-item>
										</td>
										<td class="width-15">结束里程(km)</td>
										<td class="width-30">
											<el-form-item label="" prop="endMileage" :rules="[]">
												<el-input v-model="inputForm.endMileage" placeholder=""
													:disabled="stauts"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden" v-if="inputForm.iscar==0&&inputForm.iscar!=''">
										<td class="width-15">使用里程(km)</td>
										<td class="width-30">
											<el-form-item label="" prop="useMileage" :rules="[]">
												<el-input v-model="inputForm.useMileage" placeholder="请填写使用里程" :disabled="stauts"></el-input>
											</el-form-item>
										</td>
										<td class="width-15">回程日期</td>
										<td class="width-30">
											<el-form-item label="" prop="returnDate" :rules="[]">
												<el-date-picker v-model="inputForm.returnDate" type="datetime" :disabled="stauts"
													style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"
													placeholder="选择日期时间">
												</el-date-picker>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden" v-if="inputForm.iscar==0&&inputForm.iscar!=''">
										<td class="width-15">回程时间</td>
										<td class="width-30">
											<el-form-item label="" prop="returnTime" :rules="[]">
												<el-input v-model="inputForm.returnTime" placeholder="请填写回程时间" :disabled="stauts"></el-input>
											</el-form-item>
										</td>
										<td class="width-15"></td>
										<td class="width-30"></td>
									</tr>
									<tr style="height: 80px;line-height: 80px"
										v-if="inputForm.iscar==0&&inputForm.iscar!=''">
										<td class="width-15 active" style="line-height: 80px"><span
												style="color: red">*&nbsp;</span>车辆用途
										</td>
										<td colspan="4" style="padding:0 10px">
											<el-form-item label="" prop="carUsed"
												:rules="[{required: true, message:'请填写车辆用途', trigger:'blur'}]">
												<el-input v-model="inputForm.carUsed" placeholder=""></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr style="height: 80px;line-height: 80px">
										<td class="width-15 active" style="line-height: 80px"><span
												style="color: red">*&nbsp;</span>出差事由
										</td>
										<td colspan="4" style="padding:0 10px">
											<el-form-item prop="content"
												:rules="[{required: true, message:'出差事由不能为空', trigger:'blur'}]">
												<el-input v-model="inputForm.content"></el-input>
											</el-form-item>
										</td>
									</tr>
								</table>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import tableStyles from '../../../../../utils/mixins'
	import UserSelect from '@/components/userSelect'
	import GridSelect from '@/components/gridSelect'
	import GridSelects from '@/components/gridSelect/indexs.vue'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				stauts: true,
				title: '',
				method: '',
				loading: false,
				inputForm: {
				  id: '',
				  applyuser: {
					id: ''
				  },
				  company: {
					id: ''
				  },
				  applytime: '',
				  depart: {
					id: ''
				  },
				  startdate: '',
				  enddate: '',
				  starttime: '',
				  endtime: '',
				  longtime: '',
				  place: '',
				  content: '',
				  iscar: '',
				  carinfo: {
					id: ''
				  },
				  beginMileage: '',
				  endMileage: '',
				  useMileage: '',
				  returnDate: '',
				  returnTime: '',
				  driver: {
					id: ''
				  },
				  carused: '',
				}
			}
		},
		props: {
			businessId: {
				type: String,
				default: ''
			},
			formReadOnly: {
				type: Boolean,
				default: false
			}
		},
		components: {
			UserSelect,
			SelectTree,
			GridSelect,
			GridSelects
		},
		watch: {
			'businessId': {
				handler(newVal) {
					if (this.businessId) {
						this.init(this.businessId)
					} else {
						this.$nextTick(() => {
							this.$refs.inputForm.resetFields();
							if (this.$store.state.user.id != '') {
								var users = this.$store.state.user
							} else {
								var users = JSON.parse(sessionStorage.getItem("userInfo"));
							}
							this.inputForm.applyuser.id = users.id;
							this.inputForm.company.id = users.company.id;
							this.inputForm.depart.id = users.office.id;
							this.inputForm.applytime = this.getNowTime();
						})
					}
				},
				immediate: true,
				deep: false
			}
		},
		created() {
			window.addEventListener("beforeunload", () => {
				sessionStorage.setItem("userInfo", JSON.stringify(this.$store.state.user))
			})
		},
		activated() {
			this.getUpdateBack();
		},
		methods: {
			getValuaes(value) {
				console.log(value);
				this.inputForm.carinfo.id = value[0];
				this.inputForm.beginMileage = value[1].mileage;
			},
			getUpdateBack() {
				this.$http({
					url: `/flowable/task/getUpdateBack`,
					method: 'get',
					params: {
						id: this.businessId,
						processType: '2'
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						console.log("状态",data.type);
						if(data.type==0){
							this.stauts=false;
						}
					}
				})
			},
			//计算时长
			travelHour() {
				if (this.inputForm.startdate.length != 0 && this.inputForm.enddate.length != 0 && this.inputForm.starttime
					.length != 0 && this.inputForm.endtime.length != 0) {
					var startDate = new Date(this.inputForm.startdate);
					var endDate = new Date(this.inputForm.enddate);
					var start = new Date(this.inputForm.startdate + ' ' + this.inputForm.starttime)
					var end = new Date(this.inputForm.enddate + ' ' + this.inputForm.endtime)
					if (startDate > endDate) {
						this.$message.warning('结束日期不能小于开始日期');
						this.inputForm.longtime = '';
						this.inputForm.enddate = '';
						return false
					} else if (start > end) {
						this.$message.warning('同一日期结束时间不能小于开始时间');
						this.inputForm.longtime = '';
						this.inputForm.endtime = '';
						return false
					} else {
						this.inputForm.longtime = ((end - start) / 1000 / 86400).toFixed(2); //四舍五入去两位小数点  单位天
					}
				}
			},
			init(id) {
				if (id) {
					this.loading = true
					this.inputForm.id = id
					this.$nextTick(() => {
						this.$refs.inputForm.resetFields()
						this.$http({
							url: `/dlyrl/oa/bussinesstravel/oaBussinessTravel/queryById?id=${this.inputForm.id}`,
							method: 'get'
						}).then(({
							data
						}) => {
							this.inputForm = this.recover(this.inputForm, data.oaBussinessTravel)
							this.loading = false;
						})
					})
				}
			},
			// 表单提交
			saveForm(callback) {
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						this.loading = true
						this.$http({
							url: `/dlyrl/oa/bussinesstravel/oaBussinessTravel/save`,
							method: 'post',
							data: this.inputForm
						}).then(({
							data
						}) => {
							if (data && data.success) {
								callback(data.businessTable, data.businessId);
								this.loading = false;
								this.$refs.inputForm.resetFields();
								this.inputForm.applyuser.id = this.$store.state.user.id;
								this.inputForm.company.id = this.$store.state.user.company.id;
								this.inputForm.depart.id = this.$store.state.user.office.id;
								this.inputForm.applytime = this.getNowTime();
							}
						})
					}
				})
			}
		}
	}
</script>
